
<template>
  <div class="box">
    <div class="information">
      <img v-lazy="image" alt="" class="img" />
      <p>{{ name }}</p>
      <p class="doctor">谢谢医生的辛苦付出</p>
    </div>
    <div class="thanks">
      <p class="jin">请选择答谢金额</p>

      <div class="money">
        <div
          v-for="(amount, index) in amountOptions"
          :key="index"
          class="amount-option"
          :class="{ selected: selectedAmount === amount }"
          @click="selectAmount(amount)"
        >
          <span class="element">{{ amount }}元</span>
        </div>
        <div @click="showMoreOptions = true" class="element">更多金额</div>
      </div>
      <div v-if="showMoreOptions">
        <van-popup v-model:show="showMoreOptions" round class="pop">
          <input type="number" v-model="customAmount" placeholder="请输入答谢金额(37-288元)" class="inp" />
          <img src="../../img/doctor.png" alt="" class="image">
          <div class="btn">
            <button class="cancel" @click="showMoreOptions = false">取消</button>
            <button @click="selectAmount(customAmount)" class="sure" >确定</button>
          </div>
        </van-popup>
        
      </div>
      <div class="p2">
        <p v-for="(label, index) in amountLabels" :key="index">
          {{ label }}
        </p>
      </div>
      <div class="ping">
        <textarea
          v-model="message"
          placeholder="说几句感谢医生的话"
          class="inp"
        ></textarea>
        <button @click="complete" class="complete">完成</button>
        <p class="text">答谢金会全部转入该医生的账户，并且医生会看到您的留言</p>
      </div>
    </div>
    <div class="wish">
      <p class="p1">{{ name }}医生的心意墙:</p>
      <div v-for="(entry, index) in thankWallEntries" :key="index" class="text">
        <p>
          {{ entry.user }} <span class="heart-icon">❤</span>
          {{ entry.amount }}元
        </p>
        <p>{{ entry.message }}</p>
      </div>       
    </div>
  </div>
</template>

<script setup lang="ts">

//获取的头像和名字
const {image,name} =JSON.parse(localStorage.getItem('item') as string)
import { ref } from 'vue';

interface ThankEntry {
  user: string;
  amount: number;
  message: string;
}

//开关
const showCenter =ref(false);


    // 答谢金额选项
    const amountOptions = [2, 8, 12, 36,];
    
    const amountLabels = ['一点心意', '白衣天使', '医德高尚', '德医双馨', '妙手仁心'];
    const selectedAmount = ref<number | null>(null);
    const showMoreOptions = ref<boolean>(false);
    const customAmount = ref<number | null>(null);

    // 感谢留言
    const message = ref<string>('');

    // 心意墙数据（模拟）
    const thankWallEntries = ref<ThankEntry[]>([
      {
        user: '春雨用户',
        amount: 288,
        message: '妙手仁心，一丝不苟，中国好医生！'
      }
    ]);

    // 选择答谢金额方法
    const selectAmount = (amount: number) => {
      if (amount) {
        selectedAmount.value = amount;
        showMoreOptions.value = false;
        // 更新感谢留言
        const label = amountLabels[amountOptions.indexOf(amount)];
        message.value = label;
      }
    };

    // 完成按钮点击方法
    const complete = () => {
      if (selectedAmount.value && message.value) {
        thankWallEntries.value.push({
          user: '春雨用户',
          amount: selectedAmount.value,
          message: message.value
        });
        selectedAmount.value = null;
        message.value = '';
      }
    };
</script>
<style lang="scss">
.box {
  width: 100%;
  height: 660px;

  // 信息部分
  .information {
    width: 100%;
    height: 150px;
    text-align: center;
    // 头像
    .img {
      width: 50px;
      height: 50px;
      border-radius: 25px;
      margin-top: 10px;
    }
    p {
      margin-top: 10px;
    }
    // 医生
    .doctor {
      color: red;
      font-size: 20px;
    }
  }
  // 感谢部分
  .thanks {
    width: 100%;
    height: 350px;
    // 选择答谢金额
    .jin {
      text-align: center;
      width: 100%;
      height: 50px;
      line-height: 50px;
    }
    .money {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      // 金额选项
      .element {
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        text-align: center;
        border: 1px solid #39d167;
        color: #000;
        font-size: 14px;
      }
      // 金额选项
      .amount-option {
        border-radius: 30px;
        cursor: pointer;
        text-align: center;
        
      }
      // 金额选项选中
      .amount-option.selected {
        background-color: #39d167;
        color: #fff;
      }
    }
    // 标签
    .p2 {
      display: flex;
      justify-content: space-around;
    }
    // 留言
    .ping {
      width: 95%;
      height: 100px;
      border: 1px solid #ccc;
      margin-top: 10px;
      margin-left: 10px;
      // 输入框
      .inp {
        width: 100%;
        height: 100%;
        outline: none;
        border: 0;
      }
      // 完成按钮
      .complete {
        width: 95%;
        margin-left: 10px;
        height: 50px;
        border-radius: 5px;
        background: #39d167;
        border: 0;
        outline: none;
        color: #fff;
        margin-top: 10px;
      }
      .text {
        color: #ccc;
        font-size: 13px;
        margin-left: 10px;
      }
    }
  }
  .wish {
    width: 100%;
    margin-top: 10px;
    .doctors {
      width: 90%;
      height: 50%;
      line-height: 50px;
      margin-left: 10px;
    }
    .heart-icon {
      color: red;
    }
    .p1{
      margin: 5px 0 0 10px;
    }
    .text{
      margin: 5px 0 0 10px;
    }
  }
  .pop{
    width: 95%;
    height: 400px;
    text-align: center;
    align-items: center;
    background: rgba(250,250,250,0);
    .inp{
      width: 90%;
      height: 40px;
      margin-top: 10px;
    }
    .image{
      width: 200px;
      height: 200px;
      margin-top: 20px;
    }
    .btn{
      display: flex;
      justify-content: space-between;
      margin: 40px 0 0 20px;
    }
    .cancel{
      width: 140px;
      height: 40px;
      background: #ccc;
      border-radius: 5px;
    }
    .sure{
      width: 140px;
      height: 40px;
      background: #39d167;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>